<template>
    <div class="role-box">
        <div class="search-role-box">
            <div class="search-input"><el-input class="inp" v-model="input" placeholder="请输入角色名称" /></div>
            <button>搜索</button>
            <button>重置</button>
        </div>
        <div class="add-btn"><button @click="visible = true">新增角色</button></div>
        <div class="table-box">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="roleName" label="角色名称" width="230" />
                <el-table-column prop="description" label="角色描述" width="450" />
                <el-table-column label="拥有权限" width="280" style="height:70px">
                    <template #default="scope">
                        <span v-for=" item, index in scope.row.permissions" :key="item.index">{{ item.permissionName
                        }}、</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createDate" label="创建时间" width="270" />
                <el-table-column label="操作" width="350">
                    <button class="del-btn">删除</button>
                    <button class="chg-btn">编辑</button>
                </el-table-column>
            </el-table>
        </div>
        <el-drawer v-model="visible" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">新增角色</h4>
                <button>取消</button>
                <button  @click="submitForm(ruleFormRef)">确认</button>
                <el-icon class="el-icon--left" @click="close">
                    <CircleCloseFilled />
                </el-icon>
            </template>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
                :size="formSize" status-icon>
                <el-form-item label="角色名称：" prop="roleName">
                    <el-input placeholder="请输入角色名称：" v-model="ruleForm.roleName" />
                </el-form-item>
                <el-form-item label="角色描述：" prop="description">
                    <el-input placeholder="请输入角色描述：" v-model="ruleForm.description" />
                </el-form-item>
                <el-form-item label="角色描述：" prop="description">
                    <el-tree ref='treeRef'  :data="data" @check="getCurrentKey" show-checkbox node-key="id" />
                </el-form-item>
            </el-form>
        </el-drawer>

    </div>
</template>

<script lang="ts" setup>
import { reactive, ref,Ref } from 'vue'
import { ElDrawer } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
const treeRef:Ref = ref(null)

interface DataType {
    key: string;
    roleName: string;//角色名称 
    description?: string;//角色描述
    createDate: string;//角色创建日期 
    permissions: { permissionName: string; }[]//角色对应的权限列表 }
}
const visible = ref(false)
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
let arr:any[]=[]
const data = [
  {
    id: 1,
    label: '组织管理',
    children: [
      {
        id: 4,
        label: '用户管理',
        children: [
          {
            id: 9,
            label: '角色管理',
          },
          {
            id: 10,
            label: '菜单管理',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: '靶场管理',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
]
function getCurrentKey(a:any){
    // console.log(a.label);
    // console.log(b.label);
    // console.log( permList);
    // console.log(arr);
    // console.log(a.value);
    // console.log(treeRef);
    const arr=treeRef.value.getCheckedNodes(true)
    console.log(arr);
    // arr.forEach(item => {
    //     console.log(item.label);
        
    // });
}
const ruleForm = reactive({
    roleName: '',
    description: '',

})
const form = reactive({
    roleName: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
const rules = reactive<FormRules>({
    roleName: [
        { required: true, message: '请输入角色名', trigger: 'blur' },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
const input = ref('')
const tableData: DataType[] = [
    { key: '1', roleName: '老师', description: "xxxxx", createDate: "2018-01-12", permissions: [{ permissionName: "新增用户" }, { permissionName: "修改用户" }] },
    { key: '2', roleName: '老师', description: "xxxxx", createDate: "2018-01-12", permissions: [{ permissionName: "新增用户" }, { permissionName: "修改用户" }] },
    { key: '3', roleName: '学生', createDate: "2018-01-12", permissions: [{ permissionName: "新增用户" }, { permissionName: "修改用户" }] },
];
function sum(i = 0) {

}
</script>

<style lang="less" scoped>
.role-box {
    padding: 30px;
    box-sizing: border-box;
}

.search-role-box {
    display: flex;
    height: 40px;
    box-sizing: border-box;

    .search-input {
        width: 225px;
        height: 40px;
        box-sizing: border-box;
        border-radius: 6px;
        border: 1px solid #d7d7d7;
        margin-right: 20px;

        .inp {
            width: 100%;
            height: 40px;
            outline: none;

        }

    }

    button {
        width: 80px;
        height: 40px;
        box-sizing: border-box;
        background-color: #1579fe;
        margin-right: 10px;
        border-radius: 6px;
        color: #fff;
    }
}

.add-btn {
    width: 80px;
    height: 40px;
    box-sizing: border-box;

    margin-top: 30px;

    button {
        width: 80px;
        height: 40px;
        background-color: #1579fe;
        color: #fff;
        border-radius: 6px;
    }
}

.permissions {
    display: flex;
}

/deep/.el-table tr {
    height: 70px;
}

.table-box {
    margin-top: 10px;
}

.del-btn {
    width: 60px;
    height: 30px;
    color: #ffcfd8;
    border: 1px dashed #0a7fff;
    background-color: #fff;
    border-radius: 4px;
    margin-right: 5px;
}

.chg-btn {
    width: 60px;
    height: 30px;
    color: #fff;
    border: 1px solid #3672d0;
    background-color: #197dff;
    border-radius: 4px;
}

.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
